<script setup>
import { ref,watch } from 'vue'
import {getUser, userLoginService, userRegisterService} from "@/api/user.js";
import { useRouter } from 'vue-router'
import {ElMessage} from "element-plus";
import {useUserStore} from "@/stores/user.js";

const userStore = useUserStore()
const router = useRouter()
const form = ref()
const isRegister = ref(true)

watch(isRegister, () => {
  formModel.value = {
    userAccount: '',
    userPassword: '',
    checkPassword: ''
  }
})

const formModel = ref({
  userAccount: '',
  userPassword: '',
  checkPassword: ''
})

const rules = {
  userAccount: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  userPassword: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  checkPassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value !== formModel.value.userPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
const loginService = async()=>{
  await form.value.validate()
  const res = await userLoginService(formModel.value)
  if (res?.data?.code === 0) {
    //成功的
    userStore.setToken(res?.data?.data);

    ElMessage.success("登录成功")
    const resUser = await getUser()
    userStore.setUser(resUser?.data?.data)
    router.push('/')
  }

}

const userRegister = async () => {
  const res = await userRegisterService(formModel.value)
  if (res?.data?.code === 0) {
    //成功的
    userStore.setToken(res?.data?.data);

    ElMessage.success("注册成功")
    isRegister.value = true
  }


}


</script>

<template>
  <div id="LoginPage">
    <el-row>
      <el-col :span="24" class="right imgRight">
        <div class="center">
          <img class="logo" src="../../assets/img.png" alt="">
          <div class="title">半塘OJ</div>
          <div class="text">一个在线判题交流学习平台</div>
        </div>
        <el-card class="box-card ms" shadow="always" v-if="isRegister">
          <div class="titleLogin">欢迎登录 <br/> Welcome to login</div>
          <div class="context">
            <el-form
                ref="form"
                :model="formModel"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="userAccount" class="inputZ">
                <el-input  v-model="formModel.userAccount" type="text" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码" prop="userPassword" class="inputZ">
                <el-input  v-model="formModel.userPassword" type="text" autocomplete="off" />
              </el-form-item>
              <el-form-item>
                <el-button class="margin-left" type="primary" @click="loginService">登录</el-button
                >

                <el-button class="margin-left" @click="isRegister = false"> 注册</el-button>
              </el-form-item>
              <div>
                <el-link type="info" :underline="false" @click="">
                  忘记密码 →
                </el-link>
              </div>
            </el-form>
          </div>
        </el-card>
        <el-card class="box-card ms" shadow="always" v-else>
          <div class="titleLogin">欢迎注册 <br/>Welcome to register</div>
          <div class="context">
            <el-form
                ref="ruleFormRef"
                :model="formModel"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
              <el-form-item label="账号" prop="userAccount" class="inputZ">
                <el-input  v-model="formModel.userAccount" type="text" placeholder="请输入账号" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码" prop="userPassword" class="inputZ">
                <el-input  v-model="formModel.userPassword" type="password" placeholder="请输入密码" autocomplete="off" />
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPassword" class="inputZ">
                <el-input  v-model="formModel.checkPassword" type="password" placeholder="请确认密码" autocomplete="off" />
              </el-form-item>
              <el-form-item>
                <el-button class="register" type="primary" @click="userRegister"> 注册</el-button>
              </el-form-item>
              <div>
                <el-link type="info" :underline="false"  @click="isRegister = true">
                  去登录 →
                </el-link>
              </div>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<style scoped>

#LoginPage{
  height: 100vh;
}
/*.imgLeft{*/
/*  height: 100vh;*/
/*  background-image: url("@/assets/left.png");*/
/*  background-size: cover;*/
/*}*/
.imgRight{
  height: 100vh;
  background-image: url("@/assets/right.jpg");
  background-size: cover;
}
.ms{
  margin-top: 120px;
  text-align: center;
  margin-left: 480px;
  margin-right: 480px;
}
.logo {
  height: 60px;
  margin: 1px;
}

.title {
  display: inline;
  font-weight: bold;
  /*font-family: "Arial Black";*/
  font-size: 38px;
  /*margin-right: 200px;*/
}
.center{
  height: 30px;
  width: 200px;
  margin: 70px auto 0px;
}
.text{
  margin-left: 30px;
  font-size: 14px;
}
.titleLogin{
  width: 200px;
  height: 40px;
  margin: 10px auto 20px;
  font-weight: 300;
  font-family: Arial;
  font-size: 17px;
}
.inputZ{
  margin-right: 30px;
  margin-top: 25px;
}
.margin-left{
  margin-left: 30px;
}
.register{
  width: 100px;
  margin-left: 45px;
}
</style>
